<template>
    <div>
        <!-- Z、Y、X轴移动 -->
        <div class="parent">
            <div class="son son1"></div>
        </div>
        <!-- Z、Y、X轴缩放 -->
        <div class="parent">
            <div class="son son1 son2"></div>
        </div>
        <!-- Z、Y、X轴旋转 -->
        <div class="flex">
            <div>左</div>
            <div>中</div>
            <div>右</div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {};
    },
    mounted() {},
};
</script>

<style scoped>
.parent {
    width: 200px;
    height: 200px;
    display: inline-block;
    background: pink;
    margin: 100px 100px 100px 0;
    perspective: 400px; /* perspective 透视，呈现伪3d效果 */
}
.son {
    width: 100%;
    height: 100%;
    background: blue;
}

.son1 {
    transform: translateZ(-100px);
    /* transform: translate3d(-10px, -10px, -100px); */
}

.son2:hover {
    transition: all 3s;
    transform: perspective(400px) scaleZ(-1);
}
.flex{
    width: 400px;
    background: wheat;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20px;
    font-size: 20px;
    transition: all 3s;
}
.flex:hover{
    transform: rotateY(180deg);
}
.flex:hover div{
    transition: all 3s;
    transform: rotateY(-180deg);
}
</style>
